<template>
  <div class="hello">
    <div class="logo">
      <div class="container">
        <div class="quanbu">
          <div class="col-1">
            <router-link to="/HelloWorld">
              <img src="../assets/logo.png" alt />
            </router-link>
          </div>
          <div class="col-3">
            欢迎
            <span style="color:#3275fc;">{{name}}</span>
            <a href="" style="color:#999;" class="login">
              <el @click="chenggong">登出</el>
            </a>
          </div>
        </div>
        <div class="col-2">
          <a href>
            <img src="../assets/logo.png" alt />
          </a>
          <h1>TODO</h1>
          <div class="input">
            <el-input
              v-model="input"
              placeholder="请输入内容"
              @keyup.enter.native="tianjia"
              :plain="true"
            ></el-input>
          </div>
          <div class="input-1">
            <el-button @click="tianjia">添加</el-button>
          </div>
          <el-card class="box-card">
            <div v-for="(list,index) in msg" :key="index" class="text item">
              <p>{{list.title}}</p>
              <time>{{list.time}}</time>
              <el-button icon="el-icon-delete" circle class="youbian" @click="open"></el-button>
            </div>
          </el-card>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
var cc = localStorage.getItem("token");
export default {
  name: "HelloWorld",
  data() {
    return {
      input: "",
      msg: [],
      token: "",
      name: ""
    };
  },
  mounted() {
    this.$axios
      .get("http://api.sbsh.me/index/lists/view/token/" + cc + "/title/")
      .then(res => {
        console.log(res);
        this.msg = res.data.data;
      });
    this.token = localStorage.getItem("token");
    this.$axios
      .get("http://api.sbsh.me/index/users/token/token/" + this.token)
      .then(res => {
        console.log(res);
        this.name = res.data.user;
      });
  },
  methods: {
    open(f) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$axios
            .get(
              "http://api.sbsh.me/index/lists/del/token/" +
                cc +
                "/id/" +
                this.msg[0].id
            )
            .then(res => {
              console.log(res);
            });
          this.msg.splice(f, 1);
          this.$message({
            type: "success",
            message: "删除成功!"
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },

    tianjia() {
      var f = this;
      if (this.input != "") {
        this.$axios
          .get(
            "http://api.sbsh.me/index/lists/add/token/" +
              cc +
              "/title/" +
              this.input
          )
          .then(res => {
            console.log(res);
            this.$axios
              .get("http://api.sbsh.me/index/lists/view/token/" + cc)
              .then(res => {
                this.msg = res.data.data;
              });
          });
        this.input = "";
      } else {
        this.$message({
          message: "内容不能为空哦!",
          type: "warning"
        });
      }
    },
    chenggong() {
      this.$notify({
        title: "登出成功",
        type: "success"
      });
    }
  }
};
</script>


<style scoped>
.container {
  width: 500px;
  margin: auto;
}
.col-1 img {
  width: 30px;
  display: block;
  margin: aut;
}
.col-2 img {
  width: 100px;
}
.col-3 {
  text-align: right;
  margin-top: -20px;
}
.zuobian {
  text-align: left;
}
.input {
  width: 80%;
  float: left;
}
.input-1 {
  float: left;
  font-size: 8px;
}
.el-card {
  width: 469px;
  float: left;
}
.text::after {
  display: table;
  content: "";
  clear: both;
}
.text {
  text-align: left;
}
.youbian {
  float: right;
  margin-bottom: -10px;
  margin-top: -20px;
}
.text p {
  margin-bottom: 0;
}
.col-1 img {
  cursor: pointer;
}
a{
  text-decoration: none;
}
.login:hover el{
  color: #4c90f6;
}
</style>
